<template>
    <el-container>
        <el-main class="wrapper ad">
            <v-breadcrumb v-bind:breadcumb="breadcumb"></v-breadcrumb>
            <section class="panel"
                     :style="{height: mainHeight+'px'}">
                <div class="panel-body">
                    <div class="btn-group" style="margin-bottom: 15px">
                        <!--<el-button @click="create" type="primary" icon="fa fa-plus"-->
                                   <!--size="small"> 新增-->
                        <!--</el-button>-->
                        <el-button @click="list" type="primary" icon="fa fa-refresh"
                                   size="small"> 刷新
                        </el-button>
                    </div>
                    <div class="bh-btn-group">
                        <div class="bh-search">
                            <el-date-picker @change="list"
                                            v-model="search.year"
                                            type="year" :clearable="false"
                                            placeholder="选择年份">
                            </el-date-picker>
                        </div>
                    </div>
                    <el-tabs v-loading="loading"
                             element-loading-text="努力加载中..."
                             element-loading-spinner="el-icon-loading"
                             v-model="activeName" :stretch="true" @tab-click="handleClick">
                        <el-tab-pane v-for="month in months" :label="month.name" :key="month.id" :name="month.id">
                            <el-row :gutter="24" v-if="month.id == search.month">
                                <el-col :span="4" v-if="tableData" v-for="(item,index) in tableData" :key="index">
                                    <el-card shadow="hover" class="box-card">
                                        <div slot="header" class="clearfix">
                                            <span>{{moment(item.date).format('DD')}}号</span>
                                            <el-button @click="edit(item)" style="float: right; padding: 3px 0" type="text">编辑</el-button>
                                        </div>
                                        <div class="text item">
                                            <el-table :data="item.ads" :border="true" style="width: 100%">
                                                <el-table-column prop="position" label="位置" width="60px"></el-table-column>
                                                <el-table-column label="名称">
                                                    <template slot-scope="scope">
                                                        <a v-if="scope.row.link" :href="scope.row.link" target="_blank">{{ scope.row.title }}</a>
                                                        <span v-else>{{ scope.row.title }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="name" label="销售" width="100px">
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </section>
        </el-main>
        <el-dialog
                title="数据生成"
                custom-class="bh-dialog"
                top="10vh"
                @open="resetForm('createForm')"
                :visible.sync="createAdDialog"
                width="550px">
            <el-form :model="createForm" ref="createForm" label-width="100px" class="demo-ruleForm">
                <el-form-item required label="年份：" prop="year">
                    <el-date-picker
                            v-model="createForm.year"
                            type="year"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createAdDialog = false">取 消</el-button>
                <el-button type="primary" @click="store('createForm')">确 定</el-button>
              </span>
        </el-dialog>
        <el-dialog
                title="广告编辑"
                custom-class="bh-dialog"
                top="10vh"
                @open="resetForm('adForm')"
                :visible.sync="updateAdDialog"
                width="850px">
            <el-form :model="adForm" ref="adForm" label-width="100px" class="demo-ruleForm">
                <el-form-item required label="日期：" prop="date">
                    <el-date-picker
                            v-model="adForm.date"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item v-for="(info,index) in adForm.ads" prop="" :key="index" :label="info.position">
                    <el-input style="width: 38%" v-model="info.title" placeholder="请填写广告名称"></el-input>
                    <el-input style="width: 38%"  v-model="info.link" placeholder="请填写广告链接"></el-input>
                    <el-select style="width: 20%" v-model="info.name" placeholder="请选择销售">
                        <el-option label="请选择" value=""></el-option>
                        <el-option
                                v-for="(name,id) in users"
                                :key="id"
                                :label="name"
                                :value="name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateAdDialog = false">取 消</el-button>
                <el-button type="primary" @click="update('adForm')">确 定</el-button>
              </span>
        </el-dialog>
    </el-container>
</template>

<script>
    import { mapGetters } from 'vuex';
    import vBreadcrumb from '../layout/breadcrumb.vue';
    import {AdList,AdDestory,AdUpdate,UserAll,AdStore} from '../../utils/axios';
    export default {
        components:{vBreadcrumb},
        activated(){
            //设置顶部导航选中
            this.$store.dispatch('setActive', '/shendu');
            UserAll().then((res)=>{
                this.users = res.data;
            })
            this.activeName = this.month.toString();
            this.search.year = this.year;
            this.search.month = this.month;
            this.list();
        },
        data() {
            return {
                breadcumb:[{name: "深度重庆"},],
                postions:['头条','二条','三条','四条','五条','六条','七条','八条'],
                months:[
                    {id:'1',name:'一月'},
                    {id:'2',name:'二月'},
                    {id:'3',name:'三月'},
                    {id:'4',name:'四月'},
                    {id:'5',name:'五月'},
                    {id:'6',name:'六月'},
                    {id:'7',name:'七月'},
                    {id:'8',name:'八月'},
                    {id:'9',name:'九月'},
                    {id:'10',name:'十月'},
                    {id:'11',name:'十一月'},
                    {id:'12',name:'十二月'}
                ],
                activeName:0,
                users:[],
                tableData:[],//列表数据
                updateAdDialog:false,
                createAdDialog:false,
                search: {month: null,year:null,catid:2},//筛选
                createForm:{year:''},
                //广告表单
                adForm:{},
                rules: {
                    username: [{ required: true, message: '请填写用户账号', trigger: 'blur' }],
                },
            };
        },
        computed:{
            ...mapGetters(['active','mainHeight','loading','month','year'])
        },
        methods:{
            handleClick(tab) {
                this.search.month = parseInt(tab.name);
                this.tableData = [];
                this.activeName = tab.name;
                this.list();
            },
            getDateInfo(option,year,month,day){
                if(option){
                    return new Date();
                }else{
                    return new Date(year,month,day);
                }
            },
            //获取列表
            list(){
                this.tableData = [];
                this.$store.dispatch('setLoading', true);
                this.search.year = this.moment(this.search.year).format('YYYY');
                let days = this.getDateInfo(0,this.search.year,this.search.month,0).getDate();
                for (let i=1; i<=days; i++){
                    this.tableData.push({
                        id:0,
                        catid:this.search.catid,
                        date:this.getDateInfo(0,this.search.year,this.search.month-1,i),
                        ads:[
                            {position:'头条',title:'', link:'', name:''},
                            {position:'二条',title:'', link:'', name:''},
                            {position:'三条',title:'', link:'', name:''}
                        ]
                    });
                }
                AdList({params: this.search}).then((response)=>{
                    if (response.code){
                        this.$message.error(response.msg);
                    } else {
                        this.$store.dispatch('setLoading', false);
                        this.tableData.filter((_item,key)=>{
                            response.data.filter((item)=>{
                                if(this.moment(_item.date).format('DD') == this.moment(item.date).format('DD')){
                                    this.$set(this.tableData,key, item);
                                }
                            });
                        });

                    }
                })
            },
            //编辑
            create(){
                this.createForm = {year:new Date().getFullYear().toString()};
                this.createAdDialog = true;
            },
            //编辑
            edit(info){
                this.adForm = {
                    id:info.id,
                    date:info.date,
                    ads:info.ads,
                    catid:info.catid,
                }
                this.updateAdDialog = true;
            },
            //新增提交
            store(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const formData = this.createForm;
                        formData.year = this.moment(formData.year).format('YYYY');
                        AdStore(formData).then((response)=>{
                            if(response.code){
                                this.$message.error(response.msg);
                            }else{
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose:() =>{
                                        this.updateAdDialog = false;
                                        this.list();
                                    }
                                });
                            }
                        });
                    }
                });
            },
            //更新
            update(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const formData = this.adForm;
                        formData.date = this.moment(formData.date).format('YYYY-MM-DD');
                        AdUpdate(this.adForm).then((response)=>{
                            if(response.code){
                                this.$message.error(response.msg);
                            }else{
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose:() =>{
                                        this.updateAdDialog = false;
                                        this.list();
                                    }
                                });
                            }
                        });
                    }
                });
            },
            //删除
            destory(info){
                this.$confirm('确定要删除该广告信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    AdDestory({params:{id: info.id}}).then((response) => {
                        if (response.code) {
                            this.$message.error(response.msg);
                        } else {
                            this.list();
                        }
                    });
                }).catch(() => {});
            },
            //重置表单
            resetForm(formName) {
                if (this.$refs[formName]!==undefined) {
                    this.$refs[formName].resetFields();
                }
            },
        },
    }
</script>